<template>
	<div class="loginBox">
		<Header :title="title"/>
		<div class="logoBox">
			<div class="logo">logo</div>
		</div>
		<Input :names="names" :infor="infor" :isShow="isShow" :val="mobile"/>
		<Input v-show="!logShow" :names="namess" :infor="infors" :isShow="!isShow" :againShow="againShow" :Time="Time" :val="yzmmobile" :getTime="getTime"/>
		<Input v-show="logShow" :names="pas" :infor="pasinfor" :isShow="!isShow" :againShow="againShow" :Time="Time" :getTime="getTime"/>
		<div class="loginBottom">
			<div class="pass" v-show="logShow">
				<span @click="$router.push('/find')">忘记密码？</span>
				<span  @click="getShow">快速登录</span>
			</div>
			<div class="pas" v-show="!logShow"><span @click="getShow">密码登录</span></div>
			<Button :btitle="btitle" :getpath="geturl"/>
			<div class="reg">注册<span class="r"></span></div>
		</div>
	</div>
	
</template>

<script>
	import Header from '../components/Header.vue'
	import Input from '../components/Input.vue'
	import Button from '../components/button.vue'

	export default{
		data(){
			return {
				title:'登录-个人数据银行',
				names:'手机号',
				namess:'验证码',
				pas:'密码',
				pasinfor:'请输入密码',
				infor:'请输入手机号',
				infors:'请输入验证码',
				btitle:'登录',
				isShow:false,
				logShow:false,
				againShow:false,
				Time:60,
				mobile:'',
				yzmmobile:null
			}
		},
		methods:{
			geturl(){
				this.$router.push('/trueName')
			},
			getShow(){
				this.logShow=!this.logShow
			},
			getTime(){
				let {mobile,yzmmobile,Time}=this
				this.againShow=!this.againShow;
				// if (mobile === '') {
				//   alert('手机号不能为空');
				//   return
				// }
				// if (yzmmobile === '') {
				//   alert('验证码不能为空');
				//   return
				// }
				// //  手机号证正则验证
				// if (!(/^1[3456789]\d{9}$/.test(mobile))) {
				//   alert("手机号码有误，请重新输入");
				//   return
				// }
				let num = 60;
				let that = this;
				let timer = setInterval(function () {
				  --num;
				  that.Time=num;
				  if (num === 0) {
				    that.Time=60;
					that.againShow=!that.againShow;
				    window.clearTimeout(timer);
				  }
				}, 1000)
			}
		},
		components:{
			Header,
			Input,
			Button
		}
	}
</script>


<style scoped>
	.loginBox{
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
	}
	.logoBox{
		position: relative;
		width: 100%;
		height: 181px;
		border-bottom: 1px solid #CCD6E3;
	}
	.logo{
		width: 87px;
		height: 87px;
		border:1px solid #ccd6e3;
		text-align: center;
		line-height: 87px;
		color:#ccd6e3;
		position: absolute;
		left:0;
		right:0;
		bottom:0;
		top:0;
		margin: auto;
	}
	.loginBottom{
		width: 100%;
	}
	.pas{
		width: 100%;
		height: 30px;
	}
	.pas span{
		display: inline-block;
		width: 92%;
		height: 30px;
		line-height: 40px;
		text-align:right;
		font-size: 14px;
	}
	.pass{
		width: 100%;
		height: 30px;
	}
	.pass span:nth-child(1){
		display: inline-block;
		width: 37%;
		height: 30px;
		text-align: center;
		float: left;
		color:#999999;
		line-height: 40px;
		font-size: 14px;
	}
	.pass span:nth-child(2){
		display: inline-block;
		width:55%;
		height: 30px;
		text-align: right;
		line-height: 40px;
		float: left;
		color:#999999;
		font-size: 14px;
	}
	.reg{
		width: 273px;
		height: 41px;
		text-align: center;
		line-height: 41px;
		font-size: 16px;
		color:#fff;
		margin: auto;
		font-size: 14px;
		color:#949494;
		background: #fff;
		margin-top: 30px;
	}
		
	
</style>
